<template>
  <el-main>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="位置">
          <el-input
            v-model="formInline.address"
            placeholder="请输入位置"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input
            v-model="formInline.id"
            placeholder="请输入设备编号"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search(formInline)" >查询</el-button>
          <el-button type="success" @click="add">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-table :data="tableData" style="width: 100%">
      
      <el-table-column prop="address" label="位置" width="180">
      </el-table-column>

      <el-table-column prop="id" label="设备编号"> </el-table-column>
      <el-table-column prop="contacts" label="负责人" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
         <el-button
            type="danger"
            @click.prevent="deleteRow(scope.$index, scope.row)"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加信息弹框 -->
    
      
    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑设备信息':'添加设备信息'">
        <el-form :model="from" label-width="80px" label-position="left">
            <el-form-item label="位置">
                <el-input v-model="from.address" placeholder="请输入位置" />
            </el-form-item>
            <el-form-item label="设备编号">
                <el-input v-model="from.id"  placeholder="请输入设备编号"/>
                </el-form-item>
                <el-form-item label="负责人">
                <el-input v-model="from.contacts"  placeholder="请输入负责人"/>
                </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
           <el-button type="primary" @click="confirm(from)">确定</el-button>
        </span>
</el-dialog>


    <!-- 修改信息框 -->

    
  ></el-main>
</template>
  

<style>
</style>

<script>
export default {
  created() {
    this.query();
  },
  data() {
    return {
      params:{
        address:'',
        id:''
      },
      from:{
        address:'',
        id:'',
        contacts:''

      },
    dialogType: 'new',
         dialogVisible: false,
      formInline: {
        contacts: "",
        id:""

        
      },
      tableData: [],
    };
  },
  methods: {
    // 新增
     add() {
         this.dialogType = 'new'
         this.dialogVisible = true
     },
     // 修改
     editRoleHandle(scope) {
         this.dialogType = 'edit'
         this.dialogVisible = true
     },


    query() {
      this.axios.get("http://localhost:3000/test")
        .then((response) => {
          console.log(response.data);
          this.tableData = response.data;
        })
        .catch((error) => {});
    },
    // 删除方法

    deleteRow(id, row) {
      let url =`http://localhost:3000/test/` +row.id;
      this.axios.delete(url).then((response)=>{
          console.log(response.data);
          this.tableData = response.data;
          this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((response) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
         this.query();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
  
        
       });
    },
    // 添加功能
    confirm(from){
      console.log(from)
       this.axios({
      method: 'post',
      url: 'http://localhost:3000/equipment', 
      data: {
      location: from.address,
      enumber: from.id,
      principal: from.contacts
      }
}).then((res)=>{
  console.log(res.data)
  this.query()
})

   

    },
    // 搜索功能
       search(from) {
         console.log(from)
      this.axios
        .get(" http://localhost:3000/equipment", {
          params: from,
        })
        .then((response) => {
          this.tableData = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    
  },
};
</script>